<template>
  <view>
    <!-- 启动图 -->
    <view class="content">
      <swiper class="swiper" :current='current' :indicator-dots="true" :interval="2000" :duration="1000" @change="changeSwiper">
        <swiper-item v-for="(item,index) in imglist" :key="index">
          <view class="countdown" @click="goPath">
            <text v-if="num">{{num}}</text> 跳过
          </view>
          <view class="swiper-item">
            <image lazy-load :src="item.thumb" mode=""></image>
          </view>
        </swiper-item>
      </swiper>
      <!-- 轮播指示点样式修改 -->
      <!-- <view class="dots">
        <block v-for="(item, index) in imglist.length" :key="item">
          <view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view>
        </block>
      </view> -->
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        imglist: [],
        num: 3,
        swiperCurrent: 0,
        timeout: '',
        timer: '',
        current: 0,
        currentImage: ''
      }
    },
    onShow() {
      let that = this
      console.log(2222222222222)
     if(uni.getStorageSync('isFirst')=='1'){
       uni.switchTab({
         url:'/pages/tabBar/homePages/homePages'
       })
     }else{
       uni.showLoading({
         title: "加载中...",
       })
       that.timer = setInterval(() => {
         that.getdataList();
       }, 2000)
     }
      // this.getdataList()
    },
    onUnload() {
      clearInterval(this.timeout)
      clearInterval(this.timer)
    },
    onHide() {
      clearInterval(this.timer)
      clearInterval(this.currentImage)
      clearInterval(this.timeout)
    },
    methods: {
      // 获取首页的数据
      getdataList() {
        console.log('00000')
        this.$api.get(global.apiUrls.post62c7e3aba33c4, {
            type_id: '2',
            list_rows: 10
          }).then(res => {
            // return;
            if (res.data.code == 1) {
              this.imglist = res.data.data
              this.currentImage = setInterval(res => {
                this.current++
                if (this.imglist.length - 1 == this.current) {
                  clearInterval(this.currentImage)
                }
              }, 3000)
              clearInterval(this.timer);
              uni.hideLoading()
              this.countdown()
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      goPath() {
        clearInterval(this.timer)
        clearInterval(this.currentImage)
        clearInterval(this.timeout)
        uni.setStorageSync('isFirst','1')
        uni.switchTab({
          url: '/pages/tabBar/homePages/homePages'
        })
      },
      // 倒计时
      countdown() {
        this.timeout = setInterval(res => {
          if (this.num > 0 && this.num) {
            this.num--
          } else {
            clearInterval(this.timer)
            clearInterval(this.timeout)
            clearInterval(this.currentImage)
            this.goPath()
          }
        }, 1000)
      },
      // 切换轮播图
      changeSwiper(e) {
        this.swiperCurrent = e.detail.current;
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .countdown {
    width: 120rpx;
    text-align: center;
    line-height: 50rpx;
    height: 50rpx;
    background-color: #FFFFFF;
    border-radius: 30rpx;
    border: 1rpx solid #EEEEEE;
    position: fixed;
    top: 100rpx;
    right: 30rpx;
    z-index: 9;
  }

  .content {
    position: fixed;
    width: 100%;
    height: 100%;

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-item {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .dots {
      position: absolute;
      bottom: 84upx;
      left: 50%;
      /*  这里一定要注意兼容不然很可能踩坑 */
      transform: translate(-50%, 0);
      -webkit-transform: translate(-50%, 0);
      z-index: 99;
      display: flex;
      flex-direction: row;
      justify-content: center;

      .dot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        transition: all 0.6s;
        background: #ccc;
        margin-right: 15rpx;
        border-radius: 3px;
      }

      .active {
        width: 24rpx;
        height: 8rpx;
        background: $fu-main-color;
      }
    }
  }
</style>
